<template>
  <div>
    <el-descriptions title="基本信息" :box="userinfobox">
      <div class="userinfo">
        <el-descriptions-item label="头像:">
          <el-avatar :src="userinfobox.image" />
        </el-descriptions-item>
        <el-descriptions-item label="用户ID:">{{ userinfobox.id || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="手机号:">{{ userinfobox.phone || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="昵称:">{{ userinfobox.nickname || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="性别:">{{ userinfobox.sex || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="地址:">{{ userinfobox.address || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="邮箱:">{{ userinfobox.email || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="余额:">{{ userinfobox.money }} 元</el-descriptions-item>
        <el-descriptions-item>
          <el-button type="primary" @click="$router.push('/userinfo')">返回</el-button>
        </el-descriptions-item>
      </div>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts" name="UserInfoDetailPage">
import { useRoute } from 'vue-router'
import { userDetailEvery } from '../../api/index.js'
import { onMounted, ref } from 'vue'
import { onBeforeUnmount, shallowRef } from 'vue'
const route = useRoute()
const userinfobox = ref<any[]>([])
const getUserInfoMessage = () => {
  userDetailEvery(route.query.id).then((res) => {
    if (res.data.code === 1) {
      userinfobox.value = res.data.data
    }
  })
}
onMounted(() => {
  getUserInfoMessage()
})
</script>

<style scoped lang="scss">
:deep .el-descriptions__cell {
  display: flex;
  padding-left: 60px;
  margin-top: 15px;
  padding-top: 5px;
}

:deep .el-descriptions__body {
  padding-top: 30px;
  border: 1px solid rgb(184, 120, 251);
}

:deep .box:focus {
  outline: none;
}

:deep .el-descriptions__title {
  color: rgb(184, 120, 251);
  font-size: 20px;
}

:deep .el-descriptions {
  padding: 20px;
}

:deep .el-descriptions__content {
  width: 80%;
}
</style>
